@import '../../assets/css/_variable.less';

@font-num-size: 18px;
@gap: 5px;

.virtualkeyboard {
  position: fixed;
  top: 10px;
  left: 10px;
  z-index: 10000;
  background: var(--aibox-bg7);
  border: 1px solid var(--aibox-color3);
  border-radius: 4px;
  box-shadow: 0px 5px 10px 0px rgba(4, 21, 38, 0.2);
  user-select: none;

  // box-shadow: 0 0px 2px 0px rgba(0, 0, 0, .3);
  &.hide {
    display: none;
  }

  // 头部
  .k-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    padding: 0 20px 0 10px;
    color: var(--aibox-c1);
    font-size: 14px;
    letter-spacing: 1px;
    border-radius: 4px;
    cursor: move;

    .i-keyboard {
      margin: 0 6px 0 0;
      color: rgba(35, 120, 222, 0.7);
      font-size: 36px;
    }

    .h-title {
      flex: 1;
    }

    .i-close {
      color: var(--aibox-color);
      font-size: 20px;
      cursor: pointer;

      &:hover {
        color: var(--aibox-bg12);
      }
    }
  }

  // 按键
  .key {
    margin: @gap;
    color: var(--aibox-color);
    font-size: @font-num-size;
    cursor: pointer;

    span {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 40px;
      background: var(--aibox-bg21);
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 4px;
    }

    &.active span {
      background: rgba(35, 120, 222, 0.42);
    }
  }

  // 数字键盘
  .num-box {
    width: 360px;
    overflow: hidden;
    vertical-align: top;

    .key {
      float: left;
      width: 80px;

      &.key-del {
        span {
          color: #fff;
          font-size: 25px;
          background: var(--aibox-bg9);
        }
      }

      &.key-enter {
        float: right;

        span {
          height: 90px;
        }
      }

      &.key-switch {
        color: var(--aibox-bg14);

        span {
          font-size: 25px;
        }
      }
    }
  }

  // 全键盘
  .full-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 650px;
    overflow: hidden;

    .key {
      span {
        width: 40px;
      }

      &.key-del {
        span {
          width: 140px;
          color: #fff;
          font-size: 25px;
          background: var(--aibox-bg9);
        }
      }

      &.key-caps {
        span {
          width: 70px;
        }
      }

      &.key-enter {
        span {
          width: 110px;
        }
      }

      &.key-switch {
        color: var(--aibox-bg14);

        span {
          width: 80px;
          font-size: 25px;
        }
      }

      &.key-ctrl {
        span {
          width: 90px;
        }
      }

      &.key-space {
        flex: 1;

        span {
          width: 100%;
          vertical-align: top;
        }
      }
    }
  }
}
